<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 表单
        </el-breadcrumb-item>
        <el-breadcrumb-item>基本表单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="form.commodityName"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="form.commoditySalePrice"></el-input>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input v-model="form.commodityDetails"></el-input>
          </el-form-item>
        <el-upload
  class="avatar-uploader"
  action="https://localhost:44310/api/Qiniou/content/uploadqiniu"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
          <el-form-item label="点赞评论数">
            <el-input v-model="form.commentCount"></el-input>
          </el-form-item>
          <el-form-item label="商品销量">
            <el-input v-model="form.commoditySaleNum"></el-input>
            
          </el-form-item>
          <el-form-item label="商品游览量">
            <el-input v-model="form.commodityBorwseNum">




            </el-input>
          </el-form-item>
       
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "baseform",
  data() {
    return {
      form: {
        commodityName: "",
        commoditySalePrice: "",
        commodityDetails: "",
        commodityImg: "",
        commentCount: "",
        commoditySaleNum: "",
        commodityBorwseNum: "",

      },
      imageUrl:''
    };
  },
  methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        var img=JSON.parse(res.text);
        this.form.commodityImg=img.key;
        console.log(img);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },



    onSubmit() {
        
      axios({
        url: "https://localhost:44310/app/Gadd",
        method: "post",
        data: this.form,
      }).then((res) => {
        
        //添加
        if (res.data != 0) {
          this.$message.success("添加成功");
          this.$router.push("/basetable");
        }
      });
  this.$message.success("添加成功");
          this.$router.push({name:"basetable"});


    },
  },
};
</script>
<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
